<template>
  <div class="user-login">
    <!-- 登陆 -->
    <transition name="slide-in">
      <div class="login-form" v-show="!isShow">
        <div class="left">
          <img :src="bgImage" alt="" />
        </div>
        <div class="right">
          <h2>计算机考研网站</h2>
          <h5>用户登录</h5>
          <el-form
            class="form"
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
          >
            <el-form-item
              class="form-item"
              label="用户名"
              prop="userName"
              label-width="64px"
            >
              <el-input
                v-model="loginForm.userName"
                :clearable="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="密码"
              prop="userPwd"
              label-width="64px"
            >
              <el-input
                v-model="loginForm.userPwd"
                type="password"
                :clearable="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item class="form-item">
              <el-button class="btn" @click="login" :loading="waitLoaing"
                >登陆</el-button
              >
            </el-form-item>
            <div class="jump">
              <el-link type="info" @click="toggle"
                >还未注册？立即前往 ></el-link
              >
            </div>
          </el-form>
        </div>
      </div>
    </transition>

    <!-- 注册 -->
    <transition name="slide-in">
      <div class="register-form" v-show="isShow">
        <div class="left">
          <img :src="bgImage" alt="" />
        </div>
        <div class="right">
          <h2>计算机考研网站</h2>
          <h5>用户注册</h5>
          <el-form
            class="form"
            :model="registerForm"
            :rules="registerRules"
            ref="registerForm"
          >
            <el-form-item
              class="form-item"
              label="用户名"
              prop="userName"
              label-width="80px"
            >
              <el-input
                v-model="registerForm.userName"
                :clearable="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="密码"
              prop="userPwd"
              label-width="80px"
            >
              <el-input
                v-model="registerForm.userPwd"
                type="password"
                :clearable="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="确认密码"
              prop="verifyPwd"
              label-width="80px"
            >
              <el-input
                v-model="registerForm.verifyPwd"
                type="password"
                :clearable="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="姓名"
              prop="name"
              label-width="80px"
            >
              <el-input
                v-model="registerForm.name"
                :clearable="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="form-item"
              label="性别"
              label-width="80px"
              prop="gender"
            >
              <el-select
                v-model="registerForm.gender"
                autocomplete="off"
                :clearable="true"
                :popper-append-to-body="false"
                style="width: 100px; margin-left: -148px"
              >
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
                <el-option label="保密" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item">
              <el-button class="btn" @click="register" :loading="waitLoaing"
                >立即注册</el-button
              >
            </el-form-item>
            <div class="jump">
              <el-link type="info" @click="toggle"
                >已有帐号？前往登录 ></el-link
              >
            </div>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { login, register } from "@/api/client/user";
import userModule from "@/utils/userInfo";
import bgImage from "@/assets/login.png";
export default {
  name: "UserLoginView",
  data() {
    return {
      bgImage,
      loginForm: {
        userName: "",
        userPwd: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      registerForm: {
        identity: 1,
        userName: "",
        userPwd: "",
        verifyPwd: "",
        name: "",
        gender: "",
      },
      registerRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        userPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        verifyPwd: [
          { required: true, message: "请二次输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.userPwd) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
      },
      isShow: false,
      waitLoaing: false,
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(async (v) => {
        if (v) {
          try {
            this.waitLoaing = true;
            const res = await login(this.loginForm);
            localStorage.setItem("u_t", res.data.token);
            userModule.setUser({
              id: res.data.id,
              name: res.data.name,
              avatar: res.data.avatar,
            });
            this.$router.push("/");
          } finally {
            this.waitLoaing = false;
          }
        }
      });
    },
    register() {
      this.$refs.registerForm.validate(async (v) => {
        if (v) {
          try {
            this.waitLoaing = true;
            const res = await register(this.registerForm);
            console.log(res.data);
            this.toggle();
          } finally {
            this.waitLoaing = false;
          }
        }
      });
    },
    // 表单切换
    toggle() {
      this.isShow = !this.isShow;
      this.$refs.loginForm.resetFields();
      this.$refs.registerForm.resetFields();
      this.waitLoaing = false;
    },
  },
};
</script>

<style lang="less" scoped>
.user-login {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
    to right top,
    #d16ba5,
    #c777b9,
    #ba83ca,
    #aa8fd8,
    #9a9ae1,
    #8aa7ec,
    #79b3f4,
    #69bff8,
    #52cffe,
    #41dfff,
    #46eefa,
    #5ffbf1
  );
  .login-form,
  .register-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 960px;
    height: 520px;
    display: flex;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.08);
    .left {
      width: 550px;
      height: 100%;
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
      img {
        width: 100%;
        height: 100%;
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
      }
    }
    .right {
      width: 410px;
      height: 100%;
      background-color: #fff;
      text-align: center;
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
      h2 {
        margin: 34px 0 20px;
      }
      .form {
        .form-item {
          margin: 20px auto;
          width: 80%;
          text-align: center;
        }
        .btn {
          display: inline-block;
          width: 80%;
          height: 36px;
          text-align: center;
          color: #fff;
          border-radius: 16px;
          background-image: linear-gradient(120deg, #76daec 0%, #c5a8de 100%);
          cursor: pointer;
        }
      }
      .jump {
        margin-right: 30px;
        text-align: right;
      }
    }
  }
}
// 过度动画
.slide-in-leave-active {
  transition: all 1s ease-in-out;
}
.slide-in-enter-active {
  transition: all 1.6s ease-in-out;
}

.slide-in-leave-to {
  scale: 0.6;
  opacity: 0;
}
.slide-in-enter {
  scale: 0.8;
  opacity: 0;
}

// 解决下拉框显示不完整问题
/deep/.el-select-dropdown__wrap.el-scrollbar__wrap {
  margin-bottom: 0 !important;
}
</style>